<template>
    <div>
      
        <el-table
              height="350"
                ref="multipleTable"
                :data="bookList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="BookId"
                     width="120"
                     property="id"
                    >
                <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> 
                </el-table-column>
                <el-table-column
                    property="bookName"
                    label="书名"
                    width="120">
                </el-table-column>
                <el-table-column
                    property="author"
                    label="作者"
                    show-overflow-tooltip>
                </el-table-column>
       </el-table>
       <div style="margin-top: 20px">
            <el-button @click="borrwBook">归还选中的书籍</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
     </div>
    </div>
</template>
<script>
export default {
   data(){
       return{
          bookList:null,
          selectBook:null 
       }
   },
    methods: {
    toggleSelection(rows) {
          this.$refs.multipleTable.clearSelection();
      },
      handleSelectionChange(va){
          this.selectBook = va;
          console.log(this.selectBook);
      },
     async borrwBook(){//遍历选中的书籍归还
        this.selectBook.map(async (temp)=>{
            const result = await this.$axios.put("/api/user/returnBook",{
                BookId:temp.id
            })
          if(result){
                 this.$message({
                      showClose: true,
                      message: '《'+ temp.bookName+'》，归还成功！',
                      type: 'success'
                });
             }else{
                  this.$message({
                      showClose: true,
                      message: temp.id+'归还失败！',
                      type: 'error'
                });
             }
             this.forch();
        })
      },
      async forch(){//渲染在借表
            const result = await this.$axios.get("/api/user/userReadBook",{
            params:{
                bookStatus:0
            }
        });
        this.bookList = result.rows.map((temp)=>{
            return temp.Book;
        });
        console.log("booklist",this.bookList);
      }
    },
  async created(){//组件创建后渲染在借表
        this.forch();
        
    }
}
</script>